<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
		<title>loginAnimation</title>
	</head>
	<style>
		/* 209010238薛本莲 */
		body {
			background-color: #24115996;
		}
		.login {
			text-align: center;
		}
		/* 按钮 */
		.logBtn {
			width: 109px;
			height: 42px;
			font-size: 22px;
			cursor: pointer;
			margin-top: 50px;
			margin-left: 108px;
			border: none;
			border-radius: 24px;
			color: #fff;
			transform: translate(-50%, -50%);
			background: linear-gradient(90deg, #02a8ef, #aaaaff, #ebd636, #03a9f4);
			background-size: 400%;
		}
		.logBtn::before {
			content: "";
			position: absolute;
			/* 设置发光范围 */
			left: -5px;
			right: -5px;
			top: -5px;
			bottom: -5px;
			/* 设置发光颜色 */
			background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
			background-size: 400%;
			border-radius: 50px;
			/* filter实现高斯模糊 */
			filter: blur(4px);
			z-index: -1;
		}
		.logBtn:hover::before {
			animation: sun 10s infinite;
		}
		.logBtn:hover {
			animation: sun 8s infinite;
		}
		/* 设置流光 */
		@keyframes sun {
			100% {
				background-position: -400% 0;
			}
		}
		/* 登录 */
		.main {
			width: 400px;
			height: 238px;
			background-color: rgba(255, 255, 255, 0.4);
			padding: 10px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 105px;
		}
		.user {
			margin-top: 26px;
		}
		/* 用户名、密码 */
		label {
			color: #fff;
			font-size: 18px;
			display: inline-block;
			width: 70px;
			height: 30px;
			line-height: 30px;
			padding: 5px;
			text-align: right;
		}
		.userName{
			margin-top: 50px;
		}
		.psw{
			margin-top: 20px;
		}
		.sure{
			margin-top: 38px;
			border: none;
			width: 50px;
			height: 24px;
			line-height: 24px;
			color: #757575;
			font-size: 14px;
			cursor: pointer;
			transition: all .4s;
		}
		.sure:hover{
			transform: scale(1.1);
			background-color: #757575;
			color: #fff;
		}
		input {
			width: 220px;
			height: 28px;
			border: none;
		}
		.fade-enter-active,
		.fade-leave-active {
			transition: color 4s;
		}

		.fade-enter,
		.fade-leave-to {
			background-color: #eaffd0;
		}
		
	</style>
	<body>
		<!-- 209010238薛本莲 -->
		<div class="login">
			<button class="logBtn" @click='test'>登录</button>
			<transition name='fade' enter-active-class='animate__animated animate__fadeInDown'
				leave-active-class='animate__animated animate__zoomOut'>
				<div class="main"  v-show='show'>
					<div class="user">
						<div class="userName">
							<label>用户名:</label><input type="text" placeholder="请输入用户名">
						</div>
						<div class="psw">
							<label>密码:</label><input type="password" placeholder="请输入密码">
						</div>
						<button class="sure">确定</button>
					</div>
				</div>
			</transition>
		</div>
	</body>
	<script>
		// 209010238薛本莲
		const {ref}=Vue;
		const vm = Vue.createApp({
			setup(){
				let show=ref(false);
				const test=()=>{
					show.value = !show.value;
				}
				return{
					show,
					test
				}
			}
			// data() {
			// 	return {
			// 		show: false,
			// 	}
			// },
			// methods: {
			// 	test() {
			// 		this.show = !this.show;
			// 	},
			// }
		}).mount('.login');
	</script>
</html>